﻿@{
    ViewBag.Title = "用户忠诚度统计";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using ST = EmoneyWeiXinCommon.StringTools;

<script type="text/javascript" src="@ST.GetStaticFile("Scripts/highcharts.js")"></script>
<div class="right">
    <h3>用户忠诚度统计</h3>
    <!--manage-->
    <div class="manage">
        <!--manage_top-->
        <div class="manage_top">
            <ul class="manage_top_ul manage_top_ul02">
            </ul>
        </div>
        <!--manage_top end-->
        <p class="manage_line"></p>
        <!--manage_bottom-->
        <div class="manage_bottom">
            <!--manage_chart-->
            <div class="manage_chart">
                <div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
            </div>
            <!--manage_chart end-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="dataTable">
                <tr>
                    <th><span>编号</span></th>
                    <th><span>时间范围</span></th>
                    <th><span>用户数量</span></th>
                    <th><span>所占比率</span></th>
                </tr>

            </table>
        </div>
        <!--manage_bottom end-->
    </div>
    <!--manage end-->
</div>

<script type="text/javascript">
    var weixinid = "";
    var viewBagWeixinId = "@ViewBag.weixinid";
    var getDataUrl = "@ST.GetTrendsFile("TJBusiness/GetUserLoyaltyDataList")";
    var getUserMenuUrl = "@ST.GetTrendsFile("BaseConfiguration/WeixinUserMemu")" + "?random=" + Math.random();
    $(document).ready(function () {
        createMemu();
     getUserLoyaltyData();
  
    });


    function render(result) {
        var dataList = result.dataList;

        var itemArry = [];
        var dataArry = [];

        var $table = $("#dataTable");
        $table.find("tr:gt(0)").remove();
        for (var i = 0; i < dataList.length; i++) {
            var tempData = dataList[i];
            itemArry.push(tempData.TimeSpanName);
            dataArry.push(tempData.LayltyUserCount);
            var $newRow = createNewRow(tempData);
            $table.append($newRow);
        }

        setHicharts(itemArry, dataArry);
    }


    function createNewRow(rowData) {
        var percent = "0.00%";
        if (rowData.SumUsers != 0) {
            percent = (rowData.LayltyUserCount * 1.0 / rowData.SumUsers * 100).toFixed(2) + "%";
        }
        var $newRow = $("<tr><td>" + rowData.ID + "</td><td>" + rowData.TimeSpanName + "</td><td>" + rowData.LayltyUserCount + "</td><td>" + percent + "</td></tr>");
        return $newRow;
    }


    function getContentMemu() {
        $(".manage_top_ul .manage_top_A").each(function () {
            weixinid = $(this).attr("typeid");
        })

    }
    //创建labs
    function createMemu() {
        $.ajax({
            type: "get",
            url: getUserMenuUrl,
            data: { weixinid: viewBagWeixinId },
            dataType: "html",
            async: false,
            success: function (result) {
                $(".manage_top_ul").html(result);
                $(".manage_top_ul li").click(function () {
                    $(".manage_top_ul li").removeClass("manage_top_A");
                    $(this).addClass("manage_top_A");
                    getContentMemu();
             getUserLoyaltyData();
                });
                getContentMemu();
            }
        });
    }

    function getUserLoyaltyData() {
        $.ajax({
            url: getDataUrl,
            type: "post",
            dataType: "json",
            data: { weixinId: weixinid },
            success: function (data) {
                render(data);
            }
        });

    }



</script>

<script type="text/javascript">

    function setHicharts(itemArry, dataArry) {
        $('#container').highcharts({
            chart: {
                type: 'column',
                marginTop: 40
            },
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: itemArry,
                labels: {
                    style: {
                        color: '#000',
                        fontSize: '14px',
                        fontFamily: 'Microsoft yahei'
                    }
                },
                tickLength: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: null
                },
                gridLineColor: '#EFEFEF',
                labels: {
                    format: '{value}',
                    style: {
                        color: '#000',
                        fontSize: '14px',
                        fontFamily: 'Microsoft yahei'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:14px; font-weight:bold; font-family:Microsoft yahei; text-align:center; display:block">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:14px; font-weight:bold; font-family:Microsoft yahei; ">{series.name}: </td>' +
                    '<td style="color:{series.color};padding:0;font-size:14px; font-weight:bold; font-family:Microsoft yahei; "><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '用户数量',
                color: '#2255A4',
                data: dataArry

            }],
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            legend: {
                enabled: false
            }
        });
    }


</script>
